---
layout: default
title: Home
---

<div class="home-watermark-wrapper">
    <div style="text-align: center;">
        <h1>The Hub Collective</h1>
        <p style="color: var(--text-muted); font-size: 1rem; max-width: 650px; margin: 2rem auto 2rem auto; line-height: 1.6;">
            The unified intelligence layer for modern districts. Select a community hub to access local documentation or broadcast a dispatch.
        </p>

        <section class="dashboard-controls">
            <div class="stats-bar">
                {% assign condos = site.pages | map: 'condo' | uniq | compact %}
                <span><strong>{{ condos.size }}</strong> Active Districts</span>
                <span><strong>{{ site.pages | where_exp: "item", "item.path contains 'content/'" | size }}</strong> Knowledge Pages</span>
            </div>

            <div class="search-wrapper">
                <i class="fa-solid fa-magnifying-glass"></i>
                <input type="text" id="communitySearch" placeholder="Find a community by name..." onkeyup="filterHubs()">
            </div>
        </section>

        <div class="community-grid" id="hubGrid">
            {% for building in condos %}
            {% assign alerts = site.pages | where: "layout", "broadcast" | where: "condo", building %}

            <a href="{{ site.baseurl }}/content/{{ building | slugify }}/" class="hub-card" data-name="{{ building | downcase }}">
                {% if alerts.size > 0 %}
                <div class="bell-container">
                    <i class="fa-solid fa-bell"></i><span class="notification-count">{{ alerts.size }}</span>
                </div>
                {% endif %}
                <i class="fa-solid fa-landmark"></i>
                <h3 style="font-weight: 700;">{{ building }}</h3>
                <p>Enter Collective →</p>
            </a>
            {% endfor %}

            <a href="{{ site.baseurl }}/submit.html?mode=new" class="hub-card static-card"
                style="border: 2px dashed var(--border); background: transparent; box-shadow: none;">
                <i class="fas fa-plus"></i>
                <h3 style="color: var(--text-muted);">New Hub</h3>
                <p style="color: var(--text-muted);">Register Community</p>
            </a>

            <div id="noResults" style="display: none; grid-column: 1 / -1; padding: 3rem; color: var(--text-muted);">
                <i class="fa-solid fa-magnifying-glass" style="font-size: 2rem; margin-bottom: 1rem; opacity: 0.3;"></i>
                <p>No communities match your search.</p>
            </div>
        </div>
    </div>
</div>

<script>
    function filterHubs() {
        const input = document.getElementById('communitySearch').value.toLowerCase();
        const cards = document.querySelectorAll('.hub-card:not(.static-card)'); // Only filter actual community cards
        const noResults = document.getElementById('noResults');
        let visibleCount = 0;

        for (let card of cards) {
            const name = card.getAttribute('data-name');
            
            // Safety check: only proceed if data-name exists
            if (name && name.includes(input)) {
                card.style.display = "block";
                visibleCount++;
            } else {
                card.style.display = "none";
            }
        }

        // Handle the "No Results" state
        if (noResults) {
            noResults.style.display = (visibleCount === 0 && input !== "") ? "block" : "none";
        }
    }
</script>